<template>
    <div class="main-layout">
        <!-- 页面内容区域 -->
        <div class="page-content">
            <router-view v-slot="{ Component }">
                <keep-alive :include="keepAliveComponents">
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>

        <!-- 底部标签栏 -->
        <van-tabbar v-model="activeTab" route safe-area-inset-bottom>
            <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="/hospitals" icon="friends-o">医院</van-tabbar-item>
            <van-tabbar-item to="/appointments" icon="calendar-o">预约</van-tabbar-item>
            <van-tabbar-item to="/profile" icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 底部导航当前激活的标签
const activeTab = ref(0)

// 需要缓存的组件
const keepAliveComponents = computed(() => {
    // 获取所有具有keepAlive元数据的路由名称
    const routes = route.matched.filter(record => record.meta.keepAlive)
    return routes.map(record => record.components?.default.name).filter((name): name is string => !!name)
})
</script>

<style scoped lang="scss">
.main-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .page-content {
        flex: 1;
        overflow-y: auto;
        // 为底部标签栏预留空间
        padding-bottom: 50px;
        // 防止iOS回弹效果露出下部
        background-color: #f5f5f5;
    }
}
</style>